/*
 * ═══════════════════════════════════════════════════════════════════════
 *  SmartCubic Platform CSS — 2026 "Unified Modern" Edition
 *  Site: allthatpower.net
 *
 *  두 파일(20260612-2_1_updated.css + ps-site_updated.css) 통합본
 *  중복 제거 / 충돌 해결 / 현대적 디자인 일관성 확보
 *
 *  핵심 아키텍처:
 *   - CSS Grid 히어로 스택 (HTML 수정 없이 슬라이드가 배경으로 깔림)
 *   - Mobile-First / Edge-to-Edge
 *   - clamp() 기반 fluid typography & spacing
 *   - 글래스모피즘 헤더/네비게이션
 *   - 영화적 Ken Burns 슬라이드 (infinite drift)
 *   - 마이페이지 메뉴: 탑다운 직사각형 세로 목록
 *
 *  ✅ 확정 버그 수정 (절대 되돌리지 마라):
 *   1. nav-link::after 완전 제거 (텍스트 가림 버그)
 *   2. #ajaxLoadingImage 억제
 *   3. gray-900 ≠ gray-800 분리 유지
 *   4. transition: all 금지 → 명시적 속성 열거
 *   5. 폼 font-size 16px (iOS 자동 줌 방지)
 *   6. 헤더 overflow: visible (드롭다운 클리핑 방지)
 *   7. 슬라이드 Ken Burns: active에서만, infinite alternate
 *   8. 모바일 드롭다운 position: fixed + z-index: 99999
 *   9. 터치 영역 min-height 44px 이상
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════
   섹션 1. CSS 변수 토큰 — 통합 디자인 시스템
   ═══════════════════════════════════════════════════════ */
:root {
    /* 브랜드 컬러 */
    --primary:          #4f46e5;
    --primary-hover:    #4338ca;
    --primary-dark:     #3730a3;
    --primary-light:    #eef2ff;
    --primary-grad:     linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --primary-grad-soft: linear-gradient(135deg, rgba(79,70,229,0.12) 0%, rgba(124,58,237,0.12) 100%);

    --accent:       #f59e0b;
    --accent-light: #fffbeb;
    --success:      #10b981;
    --success-light:#ecfdf5;
    --danger:       #ef4444;
    --danger-light: #fef2f2;

    /* 중립 그레이 (gray-900 ≠ gray-800 — 절대 같은 값 금지) */
    --dark:      #0f172a;
    --gray-900:  #111827;
    --gray-800:  #1e293b;
    --gray-700:  #334155;
    --gray-600:  #475569;
    --gray-500:  #64748b;
    --gray-400:  #94a3b8;
    --gray-300:  #cbd5e1;
    --gray-200:  #e2e8f0;
    --gray-100:  #f1f5f9;
    --gray-50:   #f8fafc;

    /* 배경 */
    --bg:            #ffffff;
    --bg-secondary:  #f8fafc;
    --bg-page:       linear-gradient(160deg, #f0f4ff 0%, #f5f3ff 50%, #faf5ff 100%);
    --bg-glass:      rgba(255, 255, 255, 0.75);
    --bg-glass-strong: rgba(255, 255, 255, 0.96);
    --bg-card:       #ffffff;

    /* 히어로 오버레이 */
    --hero-glass:    rgba(15, 23, 42, 0.32);
    --hero-border:   rgba(255, 255, 255, 0.18);
    --hero-text:     rgba(255, 255, 255, 0.92);
    --hero-text-dim: rgba(255, 255, 255, 0.66);

    /* 테두리 */
    --border:        rgba(148, 163, 184, 0.22);
    --border-strong: rgba(148, 163, 184, 0.40);
    --border-focus:  rgba(79, 70, 229, 0.40);
    --border-brand:  rgba(79, 70, 229, 0.28);

    /* 그림자 */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
    --shadow-sm: 0 2px 8px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
    --shadow:    0 6px 20px rgba(15,23,42,0.09), 0 2px 6px rgba(15,23,42,0.04);
    --shadow-md: 0 12px 36px rgba(15,23,42,0.11), 0 4px 10px rgba(15,23,42,0.06);
    --shadow-lg: 0 20px 56px rgba(15,23,42,0.13), 0 6px 14px rgba(15,23,42,0.06);
    --shadow-xl: 0 32px 80px rgba(15,23,42,0.16);
    --shadow-card-hover: 0 16px 44px rgba(79,70,229,0.15), 0 6px 16px rgba(15,23,42,0.08);
    --shadow-nav: 0 4px 20px rgba(79,70,229,0.24), 0 2px 8px rgba(15,23,42,0.08);

    /* 모션 — transition: all 절대 금지 */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io:     cubic-bezier(0.4, 0, 0.2, 1);
    --tr-fast: background-color .18s var(--ease-io), color .18s var(--ease-io),
               border-color .18s var(--ease-io), box-shadow .18s var(--ease-io),
               transform .18s var(--ease-io), opacity .18s var(--ease-io);
    --tr:      background-color .25s var(--ease-io), color .22s var(--ease-io),
               border-color .22s var(--ease-io), box-shadow .25s var(--ease-io),
               transform .25s var(--ease-io), opacity .22s var(--ease-io);
    --tr-lift: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);

    /* Border-radius */
    --r-xs:   4px;
    --r-sm:   8px;
    --r:      14px;
    --r-lg:   20px;
    --r-xl:   26px;
    --r-2xl:  34px;
    --r-pill: 9999px;

    /* 반응형 간격 (모바일 기본값) */
    --gutter:    8px;
    --gap:       12px;
    --pad:       12px;
    --section-gap: clamp(16px, 2.5vw, 40px);
    --content-max: 1440px;

    /* 히어로 높이 */
    --hero-h-home: 100svh;
    --hero-h-page: clamp(100px, 13svh, 160px);  /* ★ 서브 배너 — 더욱 컴팩트 */

    /* Spacing scale */
    --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
    --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem;
    --s10: 2.5rem; --s12: 3rem;

    /* ps-site 호환 폰트 변수 */
    --font-size-base: 1rem;
    --font-size-sm:   0.875rem;
    --font-size-lg:   1.5rem;
    --font-size-xl:   2rem;
    --font-size-xxl:  2.75rem;
    --font-size-hero: clamp(1.8rem, 5vw, 3.5rem);
}

@supports not (height: 100svh) {
    :root { --hero-h-home: 100vh; --hero-h-page: clamp(100px, 13vh, 160px); }
}


/* ═══════════════════════════════════════════════════════
   섹션 2. 리셋 & 기반
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0; padding: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gray-800);
    background: var(--bg-page);
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
::selection { background: rgba(79,70,229,0.18); color: var(--dark); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════
   섹션 3. Ajax 로딩 억제 (절대 제거 금지)
   ═══════════════════════════════════════════════════════ */
#ajaxLoadingImage {
    display: none !important;
    position: absolute !important;
    left: -9999px !important; top: -9999px !important;
    width: 0 !important; height: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}
#ajaxLoadingImage img { display: none !important; }


/* ═══════════════════════════════════════════════════════
   섹션 4. 컨테이너 & 그리드 — Fluid Edge-to-Edge
   ═══════════════════════════════════════════════════════ */
.container, .container-fluid {
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    margin-left: auto;
    margin-right: auto;
}
.container { max-width: var(--content-max); }

.row {
    margin-left: calc(var(--gutter) * -.5);
    margin-right: calc(var(--gutter) * -.5);
}
.row > [class*="col"] {
    padding-left: calc(var(--gutter) * .5);
    padding-right: calc(var(--gutter) * .5);
}
/* ⚠️ .row에 overflow-x: hidden 금지 — 헤더 드롭다운 잘림 */

/* 유틸 */
.bd-placeholder-img    { font-size: var(--font-size-base); text-anchor: middle; user-select: none; }
.bd-placeholder-img-lg { font-size: var(--font-size-xxl); }
.flex-auto             { flex: 0 0 auto; }
.h-250                 { height: 250px; }
.h-md-250              { height: 250px; }


/* ═══════════════════════════════════════════════════════
   섹션 5. 타이포그래피 — Fluid clamp()
   ═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: var(--dark);
    margin-top: 0;
}
h1 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3.6vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.8vw, 1.5rem); }
h4 { font-size: clamp(1.02rem, 2.2vw, 1.2rem); }
p  { margin-top: 0; }

.display-4    { font-size: clamp(1.75rem, 4vw, var(--font-size-xl)); }
.text-muted   { color: var(--gray-500) !important; }
.text-gradient {
    background: var(--primary-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.outlined-text {
    text-shadow:
        -1px -1px 0 var(--dark), 1px -1px 0 var(--dark),
        -1px  1px 0 var(--dark), 1px  1px 0 var(--dark);
}

.blog-post-title {
    margin-bottom: .4rem;
    font-size: clamp(1.4rem, 3.5vw, var(--font-size-xl));
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
}
.blog-post-meta { margin-bottom: 1.25rem; color: var(--gray-500); font-size: .9rem; }
.blog-post      { margin-bottom: clamp(2rem, 5vw, 4rem); }
.blog-pagination { margin-bottom: clamp(2rem, 5vw, 4rem); }
.blog-pagination > .btn { border-radius: 2rem; }


/* ═══════════════════════════════════════════════════════
   섹션 6. 히어로 스택 구조
   홈: 슬라이드가 배경, 헤더/메뉴가 위에 오버레이 (CSS Grid)
   서브: 헤더→메뉴→배너 순서 일반 흐름 (normal flow)
   ═══════════════════════════════════════════════════════ */

/* 기본: 일반 흐름 (서브페이지용) */
.sc-site-top {
    display: block !important;          /* ★ grid → block: 서브페이지 정상 흐름 */
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;       /* ⚠️ hidden 금지 — 드롭다운 클리핑 */
    isolation: isolate !important;
    background: #0f172a !important;
}

/* 홈 (슬라이드 있을 때): Grid 오버레이 구조 */
.sc-site-top:has(.sc-site-slide),
.sc-site-top:has(.carousel.sc-site-slide) {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-template-rows: auto auto 1fr !important;
    min-height: var(--hero-h-home) !important;
}

/* 홈 슬라이드 — 배경 전체 레이어 */
.sc-site-slide,
.sc-site-top:has(.sc-site-slide) > .carousel {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    z-index: 1 !important;
    position: relative !important;
    width: 100% !important;
    min-height: var(--hero-h-home) !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 홈: 헤더 / 메뉴 오버레이 */
.sc-site-top:has(.sc-site-slide) .sc-site-header,
.sc-site-top:has(.sc-site-slide) .blog-header {
    grid-row: 1 !important; grid-column: 1 !important; z-index: 1040 !important;
}
.sc-site-top:has(.sc-site-slide) .sc-site-menu,
.sc-site-top:has(.sc-site-slide) > .navbar,
.sc-site-top:has(.sc-site-slide) .navbar {
    grid-row: 2 !important; grid-column: 1 !important; z-index: 1039 !important;
}

/* 서브 배너 — 일반 흐름 블록 (헤더·메뉴 밑에 순서대로) */
.sc-site-title,
.sc-site-top > .jumbotron {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    z-index: 1 !important;
    /* grid 관련 속성 비활성화 */
    grid-column: unset !important;
    grid-row: unset !important;
    min-height: var(--hero-h-page);
}

/* 헤더 / 메뉴 기본값 (서브페이지 — 일반 흐름) */
.sc-site-header, .blog-header { position: relative; z-index: 1040; }
.sc-site-menu,
.sc-site-top > .navbar, .navbar { position: relative; z-index: 1039; }


/* ═══════════════════════════════════════════════════════
   섹션 7. 헤더 — 서브페이지는 불투명 다크, 홈은 글래스 오버레이
   레이아웃: [국기/언어] [로고 중앙] [검색/로그인/설정]
   ═══════════════════════════════════════════════════════ */
.blog-header, .sc-site-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    height: auto !important;
    overflow: visible !important;
    width: 100%;
    padding: .75rem var(--gutter) !important;
    position: relative !important;
    /* 기본: 불투명 다크 (서브페이지) */
    background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 헤더 내부 row/container → 3열 그리드 */
.blog-header .row, .sc-site-header .row,
.blog-header .container, .sc-site-header .container,
.blog-header .container-fluid, .sc-site-header .container-fluid {
    display: grid !important;
    grid-template-columns: minmax(80px, 1fr) auto minmax(120px, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* 좌측 — 국기/언어 */
.blog-header .row > .col:first-child,
.sc-site-header .row > .col:first-child,
.header-flags {
    grid-column: 1 !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* 국기 이미지 */
.header-flags img,
.sc-site-header .col:first-child img,
.blog-header .col:first-child img {
    height: 22px !important;
    width: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
    opacity: .92;
    cursor: pointer;
    transition: transform .2s var(--ease-out), opacity .2s ease;
}
.header-flags img:hover,
.sc-site-header .col:first-child img:hover,
.blog-header .col:first-child img:hover { transform: scale(1.12); opacity: 1; }

/* 가운데 — 로고 */
.blog-header .row > .col:nth-child(2),
.sc-site-header .row > .col:nth-child(2),
.blog-header .row > .col.text-center,
.sc-site-header .row > .col.text-center {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.blog-header-logo, .sc-site-header .navbar-brand, .navbar-brand {
    justify-self: center !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(1.1rem, 2.8vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
    text-decoration: none !important;
    background: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: min(42vw, 520px) !important;
    transition: opacity .22s ease, transform .25s var(--ease-out);
}
.blog-header-logo:hover, .sc-site-header .navbar-brand:hover,
.navbar-brand:hover { opacity: .82; transform: translateY(-1px); }

.blog-header-logo img, .sc-site-header .navbar-brand img, .navbar-brand img {
    width: clamp(22px, 2.4vw, 32px) !important;
    height: auto;
    max-height: clamp(22px, 2.4vw, 32px) !important;
    margin-right: 8px !important;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* 우측 — 아이콘 영역 */
.blog-header .row > .col:last-child,
.sc-site-header .row > .col:last-child,
.sc-site-header .header-icons,
.blog-header .header-icons,
.header-icons {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    min-width: max-content !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* 아이콘 버튼 */
.sc-site-header .header-icons a, .sc-site-header .header-icons button,
.blog-header .header-icons a, .blog-header .header-icons button,
.blog-header .col:last-child a, .blog-header .col:last-child button,
.sc-site-header .col:last-child a, .sc-site-header .col:last-child button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: var(--r-pill) !important;
    /* ★ 반투명 흰색 → 아이콘이 잘 보이는 밝은 글래스 */
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.60) !important;
    /* ★ 아이콘 색상 강제 흰색 */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: var(--tr-fast);
    cursor: pointer;
}
.sc-site-header .header-icons a:hover, .sc-site-header .header-icons button:hover,
.blog-header .col:last-child a:hover, .blog-header .col:last-child button:hover {
    background: rgba(79,70,229,.80) !important;
    border-color: rgba(255,255,255,.75) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(79,70,229,.36), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ★ 아이콘 폰트 — 흰색으로 강제, 크기 명시 */
.sc-site-header i, .blog-header i,
.sc-site-header .fa, .sc-site-header .fas, .sc-site-header .far,
.sc-site-header .fal, .sc-site-header .fab, .sc-site-header .bi,
.blog-header .fa, .blog-header .fas, .blog-header .far,
.blog-header .fal, .blog-header .fab, .blog-header .bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
}
/* SVG 아이콘도 흰색 */
.sc-site-header svg, .blog-header svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
}

/* 회원가입 링크 강조 */
.sc-site-header a[href*="register"], .sc-site-header a[href*="signup"],
.sc-site-header a[href*="sign-up"], .sc-site-header a[href*="join"],
.sc-site-header a[href*="member"], .sc-site-header a[href*="회원"],
.blog-header a[href*="register"], .blog-header a[href*="signup"],
.blog-header a[href*="join"], .blog-header a[href*="member"], .blog-header a[href*="회원"] {
    min-width: 90px !important;
    background: rgba(79,70,229,.82) !important;
    border-color: rgba(255,255,255,.50) !important;
}
/* 로그인 링크 */
.sc-site-header a[href*="login"], .sc-site-header a[href*="signin"],
.sc-site-header a[href*="로그인"],
.blog-header a[href*="login"], .blog-header a[href*="signin"],
.blog-header a[href*="로그인"] {
    min-width: 75px !important;
    background: rgba(15,23,42,.58) !important;
}


/* ═══════════════════════════════════════════════════════
   섹션 8. 네비게이션 메뉴
   ✅ nav-link::after 제거 유지 (텍스트 가림 버그)
   ═══════════════════════════════════════════════════════ */
.navbar, .sc-site-menu {
    padding: 0 !important;
    /* 기본: 불투명 다크 (서브페이지) */
    background: #1e1b4b !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    width: 100%;
    position: relative !important;
    z-index: 1039 !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.navbar-light, .bg-light { background-color: transparent !important; }

.navbar-nav {
    display: flex;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: .4rem var(--gutter);
    gap: .25rem;
    background: transparent !important;
    flex: 1;
}

.nav-item {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    position: relative;
    list-style: none;
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem !important;
    min-height: 46px;
    color: var(--hero-text) !important;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .01em;
    border-radius: var(--r-pill) !important;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(15,23,42,.20) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    transition: var(--tr-fast);
}
.nav-link::after { display: none !important; content: none !important; } /* ✅ 절대 유지 */
.nav-link:hover {
    color: #ffffff !important;
    background: rgba(79,70,229,.68) !important;
    border-color: rgba(255,255,255,.35) !important;
    transform: translateY(-2px);
    text-decoration: none;
}
.nav-link i { color: var(--hero-text-dim) !important; font-size: 1.1rem; margin-bottom: 2px; display: block; }
.nav-link:hover i, .nav-item.active .nav-link i, .nav-link.active i { color: #ffffff !important; }

.nav-item.active .nav-link, .nav-link.active {
    color: #ffffff !important;
    background: var(--primary-grad) !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-nav);
}
.nav-item.dropdown.show > .nav-link,
.nav-item.dropdown:hover > .nav-link {
    color: #ffffff !important;
    background: rgba(79,70,229,.68) !important;
    border-color: rgba(255,255,255,.35) !important;
}
.dropdown-toggle::after { transition: transform .22s ease; }
.dropdown.show .dropdown-toggle::after { transform: rotate(180deg); }

/* 햄버거 토글 */
.navbar-toggler {
    margin: .4rem var(--gutter);
    padding: .45rem .7rem;
    min-height: 44px;
    min-width: 48px;
    border: 1px solid var(--hero-border) !important;
    border-radius: var(--r) !important;
    background: rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: var(--tr-fast);
}
.navbar-toggler:hover { background: rgba(255,255,255,.24) !important; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* 모바일 펼침 메뉴 */
@media (max-width: 767px) {
    .navbar-collapse {
        background: rgba(15,23,42,.90) !important;
        backdrop-filter: blur(22px) saturate(1.4);
        -webkit-backdrop-filter: blur(22px) saturate(1.4);
        border-radius: 0 0 var(--r-lg) var(--r-lg);
        border: 1px solid var(--hero-border);
        border-top: none;
        margin: 0 var(--gutter);
        padding: .4rem 0 !important;
        box-shadow: var(--shadow-xl);
        max-height: 72svh;
        overflow-y: auto;
    }
    .navbar-nav {
        flex-direction: column; align-items: stretch;
        gap: 2px !important; padding: .4rem .6rem !important;
    }
    .nav-link {
        flex-direction: row; justify-content: flex-start;
        gap: .6rem; min-height: 48px;
        border-radius: var(--r) !important;
    }
    /* 모바일 내비 드롭다운 (서브메뉴) 인라인 전개 */
    .navbar-collapse .dropdown-menu,
    .navbar-collapse .dropdown-submenu > .dropdown-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid rgba(255,255,255,.20) !important;
        margin: 4px 0 4px 12px !important;
        padding: .3rem .5rem !important;
        background: transparent !important;
        transform: none !important;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        visibility: visible; opacity: 1; pointer-events: auto;
    }
    .navbar-collapse .dropdown-item { color: var(--hero-text); }
    .navbar-collapse .dropdown-item:hover {
        background: rgba(255,255,255,.12); color: #fff; transform: none;
    }
    .nav-item.dropdown { width: 100% !important; }

    /* 모바일 내비 바 ID 오버라이드 */
    #navbarNavDropdown {
        position: absolute;
        top: 60px; right: 0; left: 0;
        width: 100%;
        max-height: calc(100svh - 80px);
        overflow-y: auto;
    }
}


/* ═══════════════════════════════════════════════════════
   섹션 9. 드롭다운 메뉴
   ✅ pointer-events 제어 + 모바일 fixed
   ═══════════════════════════════════════════════════════ */
.dropdown-menu {
    position: absolute !important;
    z-index: 1055 !important;
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    min-width: 200px;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    transition: opacity .2s ease, transform .2s var(--ease-out);
    transform: translateY(8px);
}
.dropdown-menu.show,
.nav-item.dropdown.show > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto !important;
    transform: translateY(0);
}
@media (min-width: 768px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important; visibility: visible !important;
        opacity: 1 !important; pointer-events: auto !important;
        transform: translateY(0);
    }
}
.dropdown-item {
    display: flex;
    align-items: center;
    min-height: 48px !important;
    padding: .85rem 1.1rem !important;
    font-weight: 600; font-size: 14px;
    color: var(--gray-700);
    border-radius: var(--r-sm) !important;
    transition: var(--tr-fast);
    margin-bottom: 1px; line-height: 1.4;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(79,70,229,.1) !important;
}
.dropdown-item:last-child { margin-bottom: 0; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--primary-light); color: var(--primary); transform: translateX(3px);
}
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    position: absolute !important; top: 0 !important; left: 100% !important;
    margin-top: -6px !important; margin-left: 6px !important; z-index: 1060 !important;
}
.dropdown-submenu.show > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
    display: block !important; visibility: visible !important;
    opacity: 1 !important; pointer-events: auto !important;
}

/* ✅ 헤더 드롭다운 패널 — 탑다운 직사각형, 검정 글씨 */
.sc-site-header .dropdown-menu,
.blog-header .dropdown-menu,
.header-icons .dropdown-menu {
    /* 위치 */
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important; left: auto !important;
    z-index: 99999 !important;
    /* 패널 스타일 */
    width: min(300px, calc(100vw - 20px)) !important;
    min-width: 220px !important;
    max-height: calc(100svh - 90px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(15,23,42,.22), 0 4px 16px rgba(15,23,42,.10) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    /* 열림/닫힘 */
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity .18s ease, transform .2s cubic-bezier(0.16,1,0.3,1) !important;
}
.sc-site-header .dropdown-menu.show,
.blog-header .dropdown-menu.show,
.header-icons .dropdown-menu.show,
.sc-site-header .dropdown.show > .dropdown-menu,
.blog-header .dropdown.show > .dropdown-menu,
.header-icons .dropdown.show > .dropdown-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* 드롭다운 내부 제목 */
.sc-site-header .dropdown-menu h1,
.sc-site-header .dropdown-menu h2,
.sc-site-header .dropdown-menu h3,
.sc-site-header .dropdown-menu h4,
.sc-site-header .dropdown-menu .dropdown-header,
.blog-header .dropdown-menu h1, .blog-header .dropdown-menu h2,
.blog-header .dropdown-menu h3, .blog-header .dropdown-menu h4,
.blog-header .dropdown-menu .dropdown-header,
.header-icons .dropdown-menu h1, .header-icons .dropdown-menu h2,
.header-icons .dropdown-menu h3, .header-icons .dropdown-menu h4,
.header-icons .dropdown-menu .dropdown-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 6px 10px 10px 10px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    color: #111827 !important; -webkit-text-fill-color: #111827 !important;
    font-size: 16px !important; font-weight: 900 !important;
    line-height: 1.2 !important; text-shadow: none !important;
    background: none !important; letter-spacing: -0.02em !important;
}

/* ★ 래퍼 요소 flatten — ul/nav/btn-group을 투명하게 */
.sc-site-header .dropdown-menu .sc-mypage-menu,
.sc-site-header .dropdown-menu .sc-mypage-menu .btn-group,
.sc-site-header .dropdown-menu ul,
.sc-site-header .dropdown-menu .nav,
.sc-site-header .dropdown-menu .btn-group,
.blog-header .dropdown-menu .sc-mypage-menu,
.blog-header .dropdown-menu .sc-mypage-menu .btn-group,
.blog-header .dropdown-menu ul, .blog-header .dropdown-menu .nav,
.blog-header .dropdown-menu .btn-group,
.header-icons .dropdown-menu .sc-mypage-menu,
.header-icons .dropdown-menu .sc-mypage-menu .btn-group,
.header-icons .dropdown-menu ul, .header-icons .dropdown-menu .nav,
.header-icons .dropdown-menu .btn-group {
    display: contents !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
    width: auto !important; height: auto !important;
    flex-direction: unset !important;
}
.sc-site-header .dropdown-menu li,
.blog-header .dropdown-menu li,
.header-icons .dropdown-menu li { display: contents !important; }

/* ★★★ 핵심 — 각 항목: 세로 목록, 직사각형, 검정 글씨, 텍스트 강제 표시 */
.sc-site-header .dropdown-menu a,
.sc-site-header .dropdown-menu button,
.sc-site-header .dropdown-menu .dropdown-item,
.sc-site-header .dropdown-menu .btn,
.sc-site-header .dropdown-menu .btn-group > a,
.sc-site-header .dropdown-menu .sc-mypage-menu .btn-group > a,
.blog-header .dropdown-menu a,
.blog-header .dropdown-menu button,
.blog-header .dropdown-menu .dropdown-item,
.blog-header .dropdown-menu .btn,
.blog-header .dropdown-menu .btn-group > a,
.blog-header .dropdown-menu .sc-mypage-menu .btn-group > a,
.header-icons .dropdown-menu a,
.header-icons .dropdown-menu button,
.header-icons .dropdown-menu .dropdown-item,
.header-icons .dropdown-menu .btn,
.header-icons .dropdown-menu .btn-group > a,
.header-icons .dropdown-menu .sc-mypage-menu .btn-group > a {
    /* 직사각형 행 */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    /* 크기 */
    width: 100% !important;
    min-width: 0 !important; max-width: 100% !important;
    min-height: 44px !important; height: auto !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    /* 직사각형 모양 */
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* ★ 검정 글씨 — 강제 */
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
    /* 타이포 */
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    text-decoration: none !important;
    /* ★ 텍스트 잘리지 않게 */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    /* 크기 초기화 (pill 버튼 잔재 제거) */
    border-radius: 8px !important;
    transition: background-color .14s ease, color .14s ease !important;
    transform: none !important;
    /* 아이콘 크기 제한 해제 */
    position: relative !important;
    z-index: auto !important;
}

/* 자식 요소 모두 검정 */
.sc-site-header .dropdown-menu a *,
.sc-site-header .dropdown-menu button *,
.sc-site-header .dropdown-menu .dropdown-item *,
.blog-header .dropdown-menu a *,
.blog-header .dropdown-menu button *,
.blog-header .dropdown-menu .dropdown-item *,
.header-icons .dropdown-menu a *,
.header-icons .dropdown-menu button *,
.header-icons .dropdown-menu .dropdown-item * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
    font-size: inherit !important;
}

/* 호버 */
.sc-site-header .dropdown-menu a:hover,
.sc-site-header .dropdown-menu button:hover,
.sc-site-header .dropdown-menu .dropdown-item:hover,
.sc-site-header .dropdown-menu .btn:hover,
.blog-header .dropdown-menu a:hover,
.blog-header .dropdown-menu button:hover,
.blog-header .dropdown-menu .dropdown-item:hover,
.blog-header .dropdown-menu .btn:hover,
.header-icons .dropdown-menu a:hover,
.header-icons .dropdown-menu button:hover,
.header-icons .dropdown-menu .dropdown-item:hover,
.header-icons .dropdown-menu .btn:hover {
    background: #eef2ff !important;
    color: #3730a3 !important;
    -webkit-text-fill-color: #3730a3 !important;
    transform: none !important;
}
.sc-site-header .dropdown-menu a:hover *,
.blog-header .dropdown-menu a:hover *,
.header-icons .dropdown-menu a:hover * {
    color: #3730a3 !important; -webkit-text-fill-color: #3730a3 !important;
}

/* 로그아웃 */
.sc-site-header .dropdown-menu a[href*="logout"],
.sc-site-header .dropdown-menu a[href*="로그아웃"],
.blog-header .dropdown-menu a[href*="logout"],
.blog-header .dropdown-menu a[href*="로그아웃"],
.header-icons .dropdown-menu a[href*="logout"],
.header-icons .dropdown-menu a[href*="로그아웃"] {
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #dc2626 !important; -webkit-text-fill-color: #dc2626 !important;
    font-weight: 800 !important;
}

/* pseudo 제거 */
.sc-site-header .dropdown-menu a::before,
.sc-site-header .dropdown-menu a::after,
.sc-site-header .dropdown-menu button::before,
.sc-site-header .dropdown-menu button::after,
.blog-header .dropdown-menu a::before, .blog-header .dropdown-menu a::after,
.blog-header .dropdown-menu button::before, .blog-header .dropdown-menu button::after,
.header-icons .dropdown-menu a::before, .header-icons .dropdown-menu a::after,
.header-icons .dropdown-menu button::before, .header-icons .dropdown-menu button::after {
    display: none !important; content: none !important;
}

/* 모바일: 아이콘 바로 아래 fixed */
@media (max-width: 767px) {
    .sc-site-header .dropdown-menu,
    .blog-header .dropdown-menu,
    .header-icons .dropdown-menu {
        position: fixed !important;
        top: 62px !important;
        right: 8px !important; left: auto !important;
        width: min(300px, calc(100vw - 16px)) !important;
        max-height: calc(100svh - 78px) !important;
        padding: 10px !important;
    }
}


/* ═══════════════════════════════════════════════════════
   섹션 10. 홈 슬라이드 히어로 — 풀스크린 Ken Burns
   ═══════════════════════════════════════════════════════ */
.carousel, .sc-site-slide {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    min-height: var(--hero-h-home);
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
.carousel-inner {
    position: relative; width: 100%; height: 100%;
    min-height: inherit; overflow: hidden;
}
.carousel-item {
    position: relative; display: none;
    float: left; width: 100%;
    height: 100%; min-height: var(--hero-h-home);
    margin-right: -100%;
    backface-visibility: hidden;
    transition: opacity 1s var(--ease-io), transform 1s var(--ease-io);
}
.carousel-item.active {
    display: block;
    animation: heroSlideIn 1s var(--ease-out);
}
@keyframes heroSlideIn {
    from { opacity: .35; transform: translateX(3%); }
    to   { opacity: 1;   transform: translateX(0); }
}

.main-slide-img, .carousel-item img {
    display: block;
    width: 100% !important; height: 100% !important;
    min-height: var(--hero-h-home);
    object-fit: cover !important;
    object-position: center;
    transform-origin: center center;
}

/* ✅ Ken Burns — infinite alternate (영화적 드리프트) */
.carousel-item.active .main-slide-img,
.carousel-item.active img {
    animation: heroDrift 40s ease-in-out infinite alternate !important;
    will-change: transform;
}
@keyframes heroDrift {
    0%   { transform: scale(1.10) translate3d(-2.2%, -1.2%, 0); }
    35%  { transform: scale(1.14) translate3d(1.8%,  0.8%, 0); }
    70%  { transform: scale(1.12) translate3d(2.4%, -0.7%, 0); }
    100% { transform: scale(1.10) translate3d(-1.4%, 1.0%, 0); }
}

/* 가독성 오버레이 */
.carousel-item::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(15,23,42,.44) 0%, rgba(15,23,42,.08) 35%, rgba(15,23,42,.10) 60%, rgba(15,23,42,.64) 100%),
        linear-gradient(100deg, rgba(15,23,42,.34) 0%, rgba(15,23,42,0) 55%);
    z-index: 1; pointer-events: none;
}

/* 캡션: 하단 왼쪽 정렬 */
.carousel-caption {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: clamp(130px,18svh,190px) clamp(22px,6vw,86px) clamp(58px,9svh,110px) !important;
    max-width: none; width: 100%;
    left: 0; right: 0; bottom: auto; top: 0;
    transform: none;
}
.carousel-caption h2, .carousel-caption h3 {
    font-size: clamp(2rem, 6.5vw, 4.2rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-shadow: 0 4px 28px rgba(0,0,0,.55);
    margin: 0 0 .7rem 0;
    max-width: 18ch;
    opacity: 0;
}
.carousel-caption p {
    font-size: clamp(.95rem, 2.4vw, 1.3rem);
    font-weight: 500; color: var(--hero-text);
    text-shadow: 0 2px 14px rgba(0,0,0,.5);
    line-height: 1.6; margin: 0; max-width: 52ch; opacity: 0;
}
.carousel-item.active .carousel-caption h2,
.carousel-item.active .carousel-caption h3 { animation: capRise .9s var(--ease-out) .35s forwards; }
.carousel-item.active .carousel-caption p   { animation: capRise .9s var(--ease-out) .5s  forwards; }
.carousel-item.active .carousel-caption .btn,
.carousel-item.active .carousel-caption a.slide-btn { opacity: 0; animation: capRise .9s var(--ease-out) .65s forwards; }
@keyframes capRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 슬라이드 버튼 */
.slide-btn, .carousel-caption .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; margin-top: 1.4rem;
    padding: .8rem 1.9rem; min-height: 48px;
    border-radius: var(--r-pill) !important;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.38);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #ffffff !important; font-weight: 700; font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    transition: var(--tr-fast); cursor: pointer;
    align-self: flex-start;
}
.slide-btn:hover, .carousel-caption .btn:hover {
    background: rgba(255,255,255,.92); color: var(--dark) !important;
    border-color: transparent; transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,0,0,.3);
}

/* 좌우 컨트롤 */
.carousel-control-prev, .carousel-control-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; opacity: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--r-pill);
    background: rgba(15,23,42,.30);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: opacity .28s ease, background-color .2s ease, transform .2s var(--ease-out);
    z-index: 11; cursor: pointer; text-decoration: none;
}
.carousel-control-prev { left: clamp(10px,2.5vw,28px); }
.carousel-control-next { right: clamp(10px,2.5vw,28px); }
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next,
.carousel-control-prev:focus, .carousel-control-next:focus { opacity: 1; }
.carousel-control-prev:hover, .carousel-control-next:hover {
    background: rgba(79,70,229,.65); transform: translateY(-50%) scale(1.08);
}
.carousel-control-prev-icon, .carousel-control-next-icon { width: 18px; height: 18px; }

/* 인디케이터: 우하단, 활성 시 막대 */
.carousel-indicators {
    position: absolute;
    bottom: clamp(20px,4svh,40px); right: clamp(16px,3vw,40px); left: auto;
    transform: none; display: flex; justify-content: flex-end;
    gap: .5rem; padding: 0; margin: 0; z-index: 11; list-style: none;
}
.carousel-indicators li {
    width: 9px; height: 9px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.42); border: none; cursor: pointer;
    transition: var(--tr-fast); text-indent: -9999px; overflow: hidden;
}
.carousel-indicators li:hover { background: rgba(255,255,255,.75); }
.carousel-indicators .active { width: 32px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); }


/* ═══════════════════════════════════════════════════════
   섹션 11. 서브페이지 타이틀 배너
   헤더→메뉴→배너 순서로 일반 흐름 배치
   ═══════════════════════════════════════════════════════ */
.jumbotron, .sc-site-title {
    position: relative; overflow: hidden;
    width: 100%; min-height: var(--hero-h-page);
    margin: 0 !important; margin-bottom: 0 !important;
    /* ★ 헤더/메뉴가 위에 별도로 있으므로 일반 섹션처럼 패딩 */
    padding: clamp(20px, 3.5svh, 36px) var(--gutter) clamp(20px, 3.5svh, 36px) !important;
    border-radius: 0 !important; box-shadow: none;
    background-size: cover !important;
    background-position: center !important;
    animation: bannerDrift 36s ease-in-out infinite alternate;
    display: flex; flex-direction: column; justify-content: flex-end;
}
@keyframes bannerDrift {
    0%   { background-position: 46% 46%; }
    50%  { background-position: 54% 53%; }
    100% { background-position: 48% 50%; }
}
.jumbotron::before, .sc-site-title::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(15,23,42,.50) 0%, rgba(30,27,75,.28) 45%, rgba(15,23,42,.70) 100%),
        linear-gradient(110deg, rgba(79,70,229,.28) 0%, rgba(124,58,237,.14) 45%, rgba(15,23,42,.18) 100%);
    z-index: 1;
}
.jumbotron > *, .sc-site-title > * { position: relative; z-index: 2; }
.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4,
.sc-site-title h1, .sc-site-title h2, .sc-site-title h3, .sc-site-title h4 {
    color: #ffffff !important;
    font-size: clamp(1.4rem, 3.5vw, 2.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.1 !important;
    text-shadow: 0 3px 22px rgba(0,0,0,.45);
    margin: 0;
    display: flex; align-items: baseline;
    justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.sc-site-title small, .jumbotron small {
    color: var(--hero-text-dim) !important;
    font-weight: 600; letter-spacing: 0;
    text-shadow: 0 1px 10px rgba(0,0,0,.4); float: none !important;
    font-size: clamp(.82rem,1.6vw,1rem) !important;
}
.sc-site-title.outlined-text { text-shadow: none !important; }


/* ═══════════════════════════════════════════════════════
   섹션 12. 사이트 메인 — 상단 갭 최소화
   ═══════════════════════════════════════════════════════ */
.sc-site-main, main[role="main"] {
    flex: 1 0 auto;
    width: 100% !important; max-width: 100% !important;
    min-height: 50vh;
    padding: clamp(8px,1.2vw,18px) var(--gutter) var(--section-gap);
    margin: 0 auto;
    background: transparent; position: relative; z-index: 2;
}
.sc-site-main > .p-2,
.sc-site-main > div[class*="p-"] { padding: var(--s2) !important; }


/* ═══════════════════════════════════════════════════════
   섹션 13. 카드
   ═══════════════════════════════════════════════════════ */
.card {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    padding: 0;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm);
    transition: var(--tr-lift), border-color .22s ease;
    margin-bottom: var(--s5); overflow: hidden;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-brand) !important;
}
.card-gray    { background: var(--gray-100) !important; }
.card-body    { padding: var(--pad) !important; }
.card-header  {
    padding: var(--s3) var(--pad);
    background: linear-gradient(to right, #f8faff, #ffffff) !important;
    border-bottom: 1px solid var(--border);
    font-weight: 700; letter-spacing: -0.01em; color: var(--dark);
}
.card-title   { font-size: 1.15rem; font-weight: 800; margin-bottom: var(--s2); color: var(--dark); letter-spacing: -0.03em; }
.card-text    { color: var(--gray-700); line-height: 1.75; font-size: .925rem; }
.card-icon    { font-size: 2.5rem; color: var(--primary); margin-bottom: var(--s3); }
.card-img-top, .card-img-right { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }


/* ═══════════════════════════════════════════════════════
   섹션 14. 아이콘 그리드 (모바일 2열 → 데스크탑 자동)
   ═══════════════════════════════════════════════════════ */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px; margin: var(--s3) 0; width: 100%;
}
.icon-item, .icon-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: var(--s3);
    background: var(--bg-card);
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--tr-lift), border-color .22s ease;
    overflow: hidden; justify-content: flex-start; position: relative;
}
.icon-item::before, .icon-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--primary-grad); opacity: 0; transition: opacity .22s ease; z-index: 1;
}
.icon-item:hover, .icon-card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: var(--border-brand);
}
.icon-item:hover::before, .icon-card:hover::before { opacity: 1; }
.icon-item img, .icon-card img {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; aspect-ratio: 1 / 1 !important;
    object-fit: cover !important; border-radius: var(--r) !important;
    margin-bottom: var(--s2) !important;
    transition: transform .4s var(--ease-out), filter .3s ease !important; flex-shrink: 0 !important;
}
.icon-item:hover img, .icon-card:hover img {
    transform: scale(1.05) !important; filter: brightness(1.05) saturate(1.1) !important;
}
.icon-item i, .icon-card i {
    font-size: 3rem !important; margin-bottom: var(--s2) !important;
    color: var(--primary) !important;
    filter: drop-shadow(0 3px 6px rgba(79,70,229,.18));
    transition: transform .25s var(--ease-out), filter .25s ease;
    flex-shrink: 0 !important; width: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: var(--s5) 0 !important;
}
.icon-item:hover i, .icon-card:hover i {
    transform: scale(1.1); filter: drop-shadow(0 6px 14px rgba(79,70,229,.32));
}
.icon-item h3, .icon-item .title, .icon-card h3, .icon-card .title {
    font-size: .95rem !important; font-weight: 700 !important;
    margin: var(--s2) 0 2px 0 !important; padding: 0 var(--s2) !important;
    color: var(--dark) !important; line-height: 1.3 !important;
    word-wrap: break-word; overflow-wrap: break-word;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    white-space: normal !important; letter-spacing: -0.01em;
}
.icon-item p, .icon-item .description, .icon-card p, .icon-card .description {
    font-size: .8rem !important; color: var(--gray-500) !important;
    line-height: 1.55 !important; margin: 0 !important; padding: 0 var(--s2) !important;
    display: -webkit-box !important; -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════
   섹션 15. 스마트큐빅 리스트 & 아이템
   ═══════════════════════════════════════════════════════ */
.sc-list-cubic {
    width: 100% !important; display: flex !important;
    flex-wrap: wrap !important; margin: 0 !important;
    padding: .75rem 0 !important; gap: 0;
}
.sc-item-cubic {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    display: flex !important; flex-direction: column !important;
    padding: .4rem !important; margin-bottom: var(--s3) !important;
    transition: transform .28s var(--ease-out) !important;
}
.sc-item-cubic:hover { transform: translateY(-3px) !important; }
.sc-item-cubic > .figure, .sc-item-cubic > figure {
    margin: 0 !important; position: relative !important;
    overflow: visible !important; width: 100% !important;
    display: flex !important; flex-direction: column !important;
}
.sc-item-cubic .figure > a, .sc-item-cubic .figure > div:first-child {
    display: block !important; width: 100% !important;
    background: #fff !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    overflow: hidden !important; box-shadow: var(--shadow-sm) !important;
    transition: var(--tr-lift) !important;
    border: 1px solid var(--border); border-bottom: 0;
}
.sc-item-cubic .figure > a:hover { transform: translateY(-5px) !important; box-shadow: var(--shadow-card-hover) !important; }
.sc-item-cubic .figure-img, .sc-item-cubic .app-img, .sc-item-cubic img {
    width: 100% !important; height: auto !important;
    aspect-ratio: 1 / 1 !important; object-fit: cover !important;
    transition: transform .42s var(--ease-out), filter .3s ease !important;
    border-radius: 0 !important; margin: 0 !important; display: block !important;
}
.sc-item-cubic .figure > a:hover img { transform: scale(1.05) !important; }
.sc-item-cubic .figure-caption, .sc-item-cubic figcaption {
    background: #fff !important;
    border: 1px solid var(--border); border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
    padding: 8px !important; min-height: 54px;
    display: flex !important; align-items: center !important;
    justify-content: center !important; width: 100% !important; margin: 0 !important;
}
.sc-item-cubic .app-title, .sc-item-cubic .text-truncate,
.sc-item-cubic .figure-caption span, .sc-item-cubic figcaption span {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: normal !important; word-break: break-word !important;
    width: 100% !important; color: var(--dark) !important;
    font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.4 !important;
}
.sc-item-cubic .text-center { text-align: center !important; }
.sc-item-cubic .mt-auto     { margin-top: 0 !important; }

/* sc-item-cubic figure 내부 app-img (ps-site 호환) */
.sc-item-cubic .figure .app-img {
    width: 100%; max-width: 165px;
    height: 115px !important; object-fit: cover; border-radius: var(--r-sm);
}
.sc-item-cubic .figure .app-img.img-thumbnail { padding: 0; border: none; }
.sc-item-cubic .figure .app-img + .figure-caption {
    font-size: 13px; color: #666; font-weight: 600; margin-top: .35rem;
}
.sc-item-cubic .figure + .figure { margin-top: -10px !important; }

/* 마이큐빅 */
.sc-item-mycubic { display: flex; padding: var(--s2); }
.sc-item-mycubic .card {
    height: 100%; display: flex; flex-direction: column;
    border-radius: var(--r-lg) !important; overflow: hidden; min-height: 300px; width: 100%;
}
.sc-item-mycubic .cubic-img { height: 200px; object-fit: cover; width: 100%; }
.sc-item-mycubic .card-body {
    flex: 1; display: flex; flex-direction: column; padding: var(--s5) !important;
}
.sc-item-mycubic .card-title { font-size: 1.05rem; font-weight: 800; margin-bottom: var(--s2); letter-spacing: -0.02em; }
.sc-item-mycubic .card-text  { font-size: .875rem; color: var(--gray-700); line-height: 1.65; }


/* ═══════════════════════════════════════════════════════
   섹션 16. 홈 큐빅 탭
   ═══════════════════════════════════════════════════════ */
.sc-page-home-cubic {
    width: 100%; margin: var(--section-gap) 0; padding: var(--pad);
    background: var(--bg-card) !important;
    border-radius: var(--r-xl) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
}
.nav-tabs {
    border-bottom: 2px solid var(--border); gap: .25rem;
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0; margin: 0; list-style: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
    flex-direction: row; border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--gray-600) !important; font-weight: 700; font-size: 13.5px;
    padding: .75rem 1.1rem !important; transition: var(--tr-fast);
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    background: transparent !important; box-shadow: none !important;
    min-height: 44px !important; overflow: visible; text-shadow: none; white-space: nowrap;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: var(--gray-300) !important;
    background: var(--gray-50) !important; color: var(--primary) !important; transform: none;
}
.nav-tabs .nav-link.active {
    color: var(--primary) !important; border-bottom-color: var(--primary) !important;
    background: transparent !important; box-shadow: none !important; font-weight: 800;
}
.tab-content { padding: var(--s5) 0; }


/* ═══════════════════════════════════════════════════════
   섹션 17. 홈 게시물 리스트
   ═══════════════════════════════════════════════════════ */
.sc-page-home-board { list-style: none; padding: 0; margin: var(--section-gap) 0; }
.sc-page-home-board .list-group-item {
    border: 1px solid var(--border) !important; border-radius: var(--r) !important;
    padding: var(--s3) var(--s5) !important; margin-bottom: .6rem !important;
    transition: var(--tr-lift), border-color .2s ease;
    background: var(--bg-glass-strong) !important; box-shadow: var(--shadow-xs); list-style: none;
}
.sc-page-home-board .list-group-item:hover {
    transform: translateX(5px) translateY(-2px);
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-brand) !important; background: #fff !important;
}


/* ═══════════════════════════════════════════════════════
   섹션 18. 페이지 콘텐츠
   ═══════════════════════════════════════════════════════ */
.sc-page-content, .sc-permalink-menu-content {
    width: 100%; padding: var(--pad);
    background: var(--bg-card) !important;
    border-radius: var(--r-xl) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm); min-height: 400px;
}
.sc-page-content h3, .sc-permalink-menu-content h3 {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.2rem; font-weight: 800; color: var(--dark);
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--border); margin-bottom: var(--s5); letter-spacing: -0.03em;
}
.sc-page-content h3::before, .sc-permalink-menu-content h3::before {
    content: ''; display: inline-block;
    width: 4px; height: 1.1em;
    background: var(--primary-grad); border-radius: var(--r-pill); flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   섹션 19. 리스트 스타일
   ═══════════════════════════════════════════════════════ */
.sc-page-list  { width: 100%; }
.sc-list-select { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.sc-list-search { display: flex; gap: var(--s2); align-items: center; justify-content: flex-end; }

/* 게시판 */
.sc-list-board {
    width: 100%; background: var(--bg-card);
    border-radius: var(--r-xl) !important; overflow: hidden;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.sc-list-board table { width: 100%; border-collapse: collapse; }
.sc-list-board thead { background: var(--gray-50); }
.sc-list-board th {
    padding: .9rem 1.2rem; font-weight: 700; font-size: 13.5px; color: var(--gray-700);
    text-align: left; border-bottom: 2px solid var(--border); letter-spacing: -0.01em;
}
.sc-list-board td { padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); color: var(--gray-700); font-size: 13.5px; }
.sc-list-board tbody tr { transition: background-color .15s ease; }
.sc-list-board tbody tr:hover { background: var(--primary-light); }

/* 블로그 */
.sc-list-blog { width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--gap); padding: var(--s3) 0; }
.sc-item-blog { width: 100%; max-width: 100%; }
.sc-item-blog .row { height: 100%; margin: 0; background: var(--bg-card); }
.sc-item-blog h3 { font-size: 1.25rem; margin-bottom: var(--s2); font-weight: 800; letter-spacing: -0.03em; }
.sc-item-blog .text-muted { color: var(--gray-500) !important; font-size: .875rem; }
.sc-item-blog .stretched-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.sc-item-blog .stretched-link:hover { text-decoration: underline; }
.sc-item-blog .row.border {
    border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important; transition: var(--tr-lift), border-color .2s ease;
}
.sc-item-blog .row.border:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--border-brand) !important;
}

/* 칼럼 */
.sc-item-column { padding: var(--s3) 0; }
.sc-item-column .blog-post-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: .4rem; }
.sc-item-column .blog-post-meta  { color: var(--gray-500); font-size: .875rem; }

/* 갤러리 */
.sc-list-gallery {
    width: 100%; display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--gap); padding: var(--s3) 0;
}
.sc-item-gallery {
    aspect-ratio: 1; overflow: hidden;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow); transition: var(--tr-lift);
}
.sc-item-gallery:hover { transform: scale(1.02) translateY(-4px); box-shadow: var(--shadow-card-hover); }
.sc-item-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ */
.sc-list-faq { width: 100%; }
.sc-item-faq {
    margin-bottom: var(--s2);
    border: 1px solid var(--border) !important; border-radius: var(--r) !important;
    overflow: hidden; transition: var(--tr-lift), border-color .2s ease;
}
.sc-item-faq:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; border-color: var(--border-brand) !important; }
.sc-item-faq .card-header { background: var(--bg); padding: 0; }
.sc-item-faq .btn-link {
    width: 100%; text-align: left; min-height: 48px; padding: var(--s3) var(--s5);
    color: var(--dark); font-weight: 700; text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}
.sc-item-faq .btn-link:hover { color: var(--primary); background: var(--primary-light); }
.sc-item-faq .card-body {
    background: var(--bg-secondary); color: var(--gray-700);
    line-height: 1.8; padding: var(--s3) var(--s5); font-size: .925rem;
}


/* ═══════════════════════════════════════════════════════
   섹션 20. 퍼머링크 (고유주소 사이트)
   ═══════════════════════════════════════════════════════ */
.sc-permalink-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(15,23,42,.82) !important;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: var(--shadow-lg); padding: .8rem var(--gutter);
}
.sc-permalink-header .navbar-brand { font-size: 1.35rem; font-weight: 900; color: #fff; }
.sc-permalink-container { width: 100%; padding: var(--s5) var(--gutter); }
.sc-permalink-title {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem;
    padding-bottom: var(--s3); border-bottom: 2px solid var(--border); margin-bottom: var(--s5);
}
.sc-permalink-title h1 { font-size: clamp(1.5rem,4vw,2.3rem); font-weight: 900; margin: 0; letter-spacing: -0.04em; }
.sc-permalink-info {
    background: var(--bg-card) !important; border-radius: var(--r-xl) !important;
    border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm);
    overflow: hidden; margin-bottom: var(--s5);
}
.sc-permalink-info .card-body { padding: var(--pad) !important; }
.sc-permalink-info img { width: 100%; height: auto; object-fit: cover; }
.sc-permalink-menu-tab {
    display: flex; justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: .25rem; border-bottom: 2px solid var(--border); margin-bottom: var(--s5);
    padding: 0; list-style: none;
}
.sc-permalink-menu-tab::-webkit-scrollbar { display: none; }
.sc-permalink-menu-tab .nav-link {
    flex-direction: row; padding: .75rem 1.3rem !important;
    font-weight: 700; font-size: 13.5px; color: var(--gray-600) !important;
    border: none !important; border-bottom: 3px solid transparent !important;
    transition: var(--tr-fast); background: transparent !important;
    box-shadow: none !important; min-height: 44px !important;
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    overflow: visible; text-shadow: none; white-space: nowrap;
}
.sc-permalink-menu-tab .nav-link:hover { color: var(--primary) !important; background: var(--primary-light) !important; transform: none; }
.sc-permalink-menu-tab .nav-link.active { color: var(--primary) !important; border-bottom-color: var(--primary) !important; font-weight: 800; }
.sc-permalink-board { width: 100%; margin-bottom: var(--s5); }
.sc-permalink-board .card { margin-bottom: var(--s2); }
.sc-permalink-board .card-header { background: var(--bg); cursor: pointer; transition: background-color .18s ease; padding: var(--s3); }
.sc-permalink-board .card-header:hover { background: var(--primary-light); }
.sc-permalink-board .btn-link { width: 100%; text-align: left; color: var(--dark); font-weight: 700; text-decoration: none; min-height: 44px; }
.sc-permalink-comment {
    width: 100%; background: var(--bg-card) !important;
    border-radius: var(--r-xl) !important; border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm); padding: var(--pad) !important;
}
.sc-permalink-comment .card-body {
    border-top: 1px solid var(--border); padding: var(--s3); margin-left: 16px;
    transition: background-color .18s ease; line-height: 1.75;
}
.sc-permalink-comment .card-body:hover { background: var(--gray-50); }
.sc-permalink-comment .card-title { font-size: .95rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; }
.sc-permalink-comment .badge { padding: .2rem .6rem; border-radius: var(--r-sm); }
.sc-permalink-comment .card-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.sc-permalink-comment .card-link:hover { color: var(--primary-hover); text-decoration: underline; }
.sc-permalink-footer {
    width: 100%; background: var(--bg-glass-strong) !important;
    border-top: 1px solid var(--border) !important;
    padding: var(--s8) var(--gutter); text-align: center; color: var(--gray-600);
    margin-top: auto; font-size: .875rem;
}


/* ═══════════════════════════════════════════════════════
   섹션 21. 마이페이지 메뉴 ★ 세로 탑다운 직사각형 — 최강 강제
   ═══════════════════════════════════════════════════════ */
.sc-mypage-menu { width: 100% !important; margin: var(--s3) 0 !important; }

/* 래퍼 — 세로 컬럼 */
.sc-mypage-menu .btn-group,
.sc-mypage-menu > .btn-group {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
}

/* 각 항목 */
.sc-mypage-menu .btn-group > a,
.sc-mypage-menu .btn-group > button,
.sc-mypage-menu > .btn-group > a,
.sc-mypage-menu > .btn-group > button,
.sc-mypage-menu a.btn,
.sc-mypage-menu button.btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important; max-width: 100% !important;
    min-height: 44px !important; height: auto !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transition: background-color .14s ease, color .14s ease !important;
    transform: none !important;
}

/* 자식도 검정 */
.sc-mypage-menu .btn-group > a *,
.sc-mypage-menu .btn-group > button *,
.sc-mypage-menu > .btn-group > a *,
.sc-mypage-menu > .btn-group > button * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
}

.sc-mypage-menu .btn-group > a:hover,
.sc-mypage-menu .btn-group > button:hover,
.sc-mypage-menu > .btn-group > a:hover,
.sc-mypage-menu > .btn-group > button:hover {
    background: #eef2ff !important;
    color: #3730a3 !important;
    -webkit-text-fill-color: #3730a3 !important;
    transform: none !important;
}
.sc-mypage-menu .btn-group > a.active,
.sc-mypage-menu .btn-group > button.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 아이콘 */
.sc-mypage-menu .btn-group > a i,
.sc-mypage-menu .btn-group > button i,
.sc-mypage-menu .btn-group > a svg,
.sc-mypage-menu .btn-group > button svg,
.sc-mypage-menu .btn-group > a .fa,
.sc-mypage-menu .btn-group > a .fas,
.sc-mypage-menu .btn-group > a .bi {
    font-size: 15px !important;
    width: 16px !important; min-width: 16px !important;
    height: auto !important; line-height: 1 !important;
    flex-shrink: 0 !important; color: currentColor !important;
}

/* font-size:0 트릭 해제 */
.sc-mypage-menu .btn-group > a:nth-child(-n+20),
.sc-mypage-menu .btn-group > button:nth-child(-n+20),
.sc-mypage-menu > .btn-group > a:nth-child(-n+20),
.sc-mypage-menu > .btn-group > button:nth-child(-n+20) { font-size: 14px !important; }
.sc-mypage-menu .btn-group > a:nth-child(-n+20)::after,
.sc-mypage-menu .btn-group > button:nth-child(-n+20)::after,
.sc-mypage-menu > .btn-group > a:nth-child(-n+20)::after,
.sc-mypage-menu > .btn-group > button:nth-child(-n+20)::after { display: none !important; content: none !important; }

/* ps-site 잔재 제거 */
.sc-mypage-menu > .btn-group > .btn-group:not(:last-child) > .btn,
.sc-mypage-menu > .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.sc-mypage-menu > .btn-group > .btn-group:not(:first-child) > .btn,
.sc-mypage-menu > .btn-group > .btn:not(:first-child) { border-radius: 8px !important; }

/* 로그아웃 */
.sc-mypage-menu .btn-group > a[href*="logout"],
.sc-mypage-menu .btn-group > a[href*="로그아웃"],
.sc-mypage-menu > .btn-group > a[href*="logout"],
.sc-mypage-menu > .btn-group > a[href*="로그아웃"] {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    font-weight: 800 !important;
}
.sc-mypage-menu .btn-group > a[href*="logout"]:hover,
.sc-mypage-menu .btn-group > a[href*="로그아웃"]:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    transform: none !important;
}

@media (max-width: 767px) {
    .sc-mypage-menu { margin: 4px 0 6px !important; }
    .sc-mypage-menu .btn-group, .sc-mypage-menu > .btn-group { gap: 1px !important; }
    .sc-mypage-menu .btn-group > a,
    .sc-mypage-menu .btn-group > button,
    .sc-mypage-menu > .btn-group > a,
    .sc-mypage-menu > .btn-group > button,
    .sc-mypage-menu a.btn, .sc-mypage-menu button.btn {
        min-height: 42px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
    }
}


/* ═══════════════════════════════════════════════════════
   섹션 22. 큐빅 검색
   ═══════════════════════════════════════════════════════ */
.sc-cubic-search {
    width: 100%; padding: var(--pad);
    background: var(--bg-card) !important;
    border-radius: var(--r-xl) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm); margin-bottom: var(--section-gap);
}


/* ═══════════════════════════════════════════════════════
   섹션 23. 버튼 (터치 최소 44px)
   ═══════════════════════════════════════════════════════ */
.btn {
    border-radius: var(--r) !important;
    padding: .6rem 1.4rem; min-height: 44px;
    font-weight: 700; font-size: 14px;
    transition: var(--tr-fast);
    border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; letter-spacing: -0.01em; line-height: 1.4; gap: .4rem;
}
.btn-primary {
    background: var(--primary-grad); color: white;
    box-shadow: 0 4px 14px rgba(79,70,229,.28); border: none;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(79,70,229,.36); filter: brightness(1.06); color: white; }
.btn-secondary { background: var(--gray-600); color: white; box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--gray-700); color: white; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline-primary { background: transparent; border: 2px solid var(--primary) !important; color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary-grad); color: white; border-color: transparent !important; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; border: 1.5px solid var(--border-strong) !important; color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-50); border-color: var(--gray-400) !important; color: var(--dark); }
.btn-sm { padding: .35rem .9rem; font-size: 12.5px; min-height: 36px; }
.btn-lg { padding: .8rem 1.8rem; font-size: 15px; min-height: 52px; }
.blog-pagination > .btn { border-radius: 2rem; }


/* ═══════════════════════════════════════════════════════
   섹션 24. 폼 (✅ iOS 자동 줌 방지 — font-size 16px 절대 유지)
   ═══════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
textarea, select, .form-control {
    width: 100%; min-height: 48px; padding: .6rem 1rem;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: var(--r) !important;
    font-size: 16px !important;  /* ✅ iOS 자동 줌 방지 */
    transition: border-color .18s ease, box-shadow .18s ease;
    background: rgba(255,255,255,.96) !important; color: var(--dark); line-height: 1.5;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
    background: #fff !important;
}
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
label { font-weight: 600; color: var(--gray-700); margin-bottom: .3rem; }


/* ═══════════════════════════════════════════════════════
   섹션 25. 페이징
   ═══════════════════════════════════════════════════════ */
.sc-list-page-info { display: flex; align-items: center; gap: var(--s2); color: var(--gray-600); font-size: 13.5px; }
.sc-list-paging .pagination {
    display: flex; justify-content: flex-end; gap: 4px;
    padding: 0; margin: var(--s3) 0; list-style: none; flex-wrap: wrap;
}
.sc-list-paging .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: .4rem .7rem;
    border: 1px solid var(--border); border-radius: var(--r-sm) !important;
    background: var(--bg-card); color: var(--gray-700);
    font-weight: 600; font-size: 13.5px; text-decoration: none; transition: var(--tr-fast);
}
.sc-list-paging .page-link:hover {
    border-color: var(--primary); background: var(--primary-light); color: var(--primary); transform: translateY(-2px);
}
.sc-list-paging .page-item.active .page-link {
    background: var(--primary-grad); border-color: transparent; color: #fff; box-shadow: var(--shadow-nav);
}
.sc-list-paging .page-item.disabled .page-link { opacity: .45; pointer-events: none; }


/* ═══════════════════════════════════════════════════════
   섹션 26. 구글맵 모달
   ═══════════════════════════════════════════════════════ */
.sc-google-map { z-index: 1060; }
.sc-google-map .modal-content { border-radius: var(--r-xl) !important; border: none; box-shadow: var(--shadow-xl); overflow: hidden; }
.sc-google-map .modal-header { border-bottom: 1px solid var(--border); }


/* ═══════════════════════════════════════════════════════
   섹션 27. 푸터
   ═══════════════════════════════════════════════════════ */
.blog-footer, .sc-site-footer {
    width: 100%; margin-top: auto;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%) !important;
    color: var(--hero-text-dim);
    padding: var(--s10) var(--gutter) calc(var(--s10) + 58px);
    text-align: center; font-size: .875rem; border-top: none; position: relative;
}
.blog-footer::before, .sc-site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--primary-grad);
}
.blog-footer a, .sc-site-footer a  { color: var(--hero-text); text-decoration: none; }
.blog-footer a:hover, .sc-site-footer a:hover { color: #fff; text-decoration: underline; }
.blog-footer p, .sc-site-footer p  { margin-bottom: .4rem; }
.blog-footer p:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════
   섹션 28. 유틸리티
   ═══════════════════════════════════════════════════════ */
.shadow-soft    { box-shadow: var(--shadow) !important; }
.rounded-xl     { border-radius: var(--r-xl) !important; }
.rounded-modern { border-radius: var(--r-lg) !important; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ═══════════════════════════════════════════════════════
   섹션 29. 애니메이션 & Reveal (1회 — infinite 금지)
   ═══════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal, .fade-up { animation: fadeUp .7s var(--ease-out) both; }
.sc-site-main > div > * { animation: fadeUp .6s var(--ease-out) both; }


/* ═══════════════════════════════════════════════════════
   섹션 30. 스크롤바
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb {
    background: var(--gray-300); border-radius: var(--r-pill);
    border: 2px solid var(--gray-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }


/* ═══════════════════════════════════════════════════════
   섹션 31. 모바일 하단 내비 (bottom-nav)
   ═══════════════════════════════════════════════════════ */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(15,23,42,.10);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    min-height: 48px; color: var(--gray-500);
    font-size: 10.5px; font-weight: 600; text-decoration: none;
    border-radius: var(--r); transition: var(--tr-fast);
}
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--primary); background: var(--primary-light); }


/* ═══════════════════════════════════════════════════════
   섹션 32. 📱 모바일 (max-width: 767px) ★ 핵심
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bottom-nav { display: flex; }
    :root { --hero-h-home: 92svh; }

    body { font-size: 13.5px; }

    /* 컨테이너 */
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    .row { margin-left: -6px; margin-right: -6px; }
    .row > [class*="col"] { padding-left: 6px; padding-right: 6px; }

    /* 헤더 */
    .blog-header, .sc-site-header {
        display: flex !important; visibility: visible !important; opacity: 1 !important;
        min-height: 56px !important; height: auto !important; padding: .55rem 10px !important;
    }
    .blog-header .row, .sc-site-header .row,
    .blog-header .container, .sc-site-header .container,
    .blog-header .container-fluid, .sc-site-header .container-fluid {
        grid-template-columns: minmax(54px,.52fr) auto minmax(100px,1.48fr) !important;
        gap: 5px !important;
    }
    .blog-header-logo, .sc-site-header .navbar-brand, .navbar-brand {
        font-size: clamp(1.0rem, 5.2vw, 1.35rem) !important;
        max-width: calc(100vw - 160px) !important;
        letter-spacing: -0.06em !important;
    }
    .blog-header-logo img, .sc-site-header .navbar-brand img, .navbar-brand img {
        width: 22px !important; max-height: 22px !important; margin-right: 5px !important;
    }
    .header-flags img, .sc-site-header .col:first-child img, .blog-header .col:first-child img {
        height: 18px !important;
    }
    .sc-site-header .header-icons a, .sc-site-header .header-icons button,
    .blog-header .col:last-child a, .blog-header .col:last-child button,
    .sc-site-header .col:last-child a, .sc-site-header .col:last-child button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        font-size: 14px !important;
        /* 모바일에서도 흰 글래스 유지 */
        background: rgba(255,255,255,.18) !important;
        border: 1.5px solid rgba(255,255,255,.55) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    .sc-site-header a[href*="register"],
    .sc-site-header a[href*="signup"], .sc-site-header a[href*="join"],
    .sc-site-header a[href*="member"], .sc-site-header a[href*="회원"],
    .blog-header a[href*="register"],
    .blog-header a[href*="signup"], .blog-header a[href*="join"],
    .blog-header a[href*="member"], .blog-header a[href*="회원"] { min-width: 62px !important; }
    .sc-site-header a[href*="login"], .sc-site-header a[href*="signin"],
    .sc-site-header a[href*="로그인"],
    .blog-header a[href*="login"], .blog-header a[href*="signin"],
    .blog-header a[href*="로그인"] { min-width: 52px !important; }

    /* 슬라이드 캡션 */
    .carousel-caption {
        align-items: center !important; text-align: center !important;
        padding: 130px 18px 78px 18px !important;
    }
    .carousel-caption h2, .carousel-caption h3, .carousel-caption p { text-align: center !important; }
    .carousel-caption .btn, .carousel-caption a.slide-btn, .slide-btn { align-self: center !important; }
    .carousel-control-prev, .carousel-control-next { width: 40px; height: 40px; }

    /* 서브 배너 */
    .jumbotron, .sc-site-title {
        min-height: clamp(80px, 12svh, 110px) !important;
        padding: 14px var(--gutter) 14px !important;
    }
    .jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4,
    .sc-site-title h1, .sc-site-title h2, .sc-site-title h3, .sc-site-title h4 {
        font-size: clamp(1.1rem, 6vw, 1.5rem) !important;
    }

    /* 메인 */
    .sc-site-main, main[role="main"] { padding: var(--gap) var(--gutter); }
    .sc-site-main > .p-2, .sc-site-main > div[class*="p-"] { padding: 4px !important; }

    /* 카드 */
    .card, .sc-page-home-cubic, .sc-page-content, .sc-cubic-search,
    .sc-permalink-info, .sc-permalink-menu-content, .sc-permalink-comment {
        border-radius: 16px !important;
    }
    .sc-page-content, .sc-permalink-menu-content { min-height: 280px; }

    /* 게시판 */
    .sc-list-board th, .sc-list-board td { padding: .65rem .7rem; font-size: 12.5px; }

    /* 갤러리/블로그 */
    .sc-list-gallery { gap: 7px; }
    .sc-item-blog h3 { font-size: 1.05rem; }
    .sc-item-blog .row .col { padding: .85rem !important; }

    /* 큐빅 */
    .sc-list-cubic { padding: .4rem 0 !important; }
    .sc-item-cubic { padding: .25rem !important; }
    .sc-item-cubic:hover { transform: none !important; }
    .sc-item-cubic .figure-caption, .sc-item-cubic figcaption {
        min-height: 48px; padding: 6px 7px !important; font-size: 12.5px !important;
    }

    /* 게시물 */
    .list-group-item .post-title, .post-list .title,
    .board-list .subject, .post-item h3 { color: #000 !important; background-color: transparent !important; }
    .list-group-item, .post-item { background-color: #fff !important; }

    /* 페이징 */
    .sc-list-paging .pagination { justify-content: center; }

    /* 퍼머링크 */
    .sc-permalink-container { padding: var(--s3) var(--gutter); }

    /* 마이페이지 */
    .sc-mypage-menu { margin: 4px 0 6px !important; padding: 2px 0 !important; }
    .sc-mypage-menu .btn-group, .sc-mypage-menu > .btn-group { gap: 3px !important; }
    .sc-mypage-menu .btn-group > a,
    .sc-mypage-menu .btn-group > button,
    .sc-mypage-menu > .btn-group > a,
    .sc-mypage-menu > .btn-group > button,
    .sc-mypage-menu a.btn, .sc-mypage-menu button.btn {
        min-height: 40px !important; padding: 9px 12px !important; font-size: 13px !important;
    }

    /* display-4 */
    .display-4 { font-size: clamp(1.5rem, 7vw, 2rem); }
}


/* ═══════════════════════════════════════════════════════
   섹션 33. 초소형 (max-width: 390px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 390px) {
    body { font-size: 12.5px; }
    .blog-header-logo, .sc-site-header .navbar-brand {
        font-size: clamp(.92rem, 5.2vw, 1.15rem) !important;
        max-width: calc(100vw - 145px) !important;
        letter-spacing: -0.07em !important;
    }
    .blog-header-logo img, .sc-site-header .navbar-brand img {
        width: 18px !important; max-height: 18px !important; margin-right: 4px !important;
    }
    .sc-site-header .col:first-child img, .blog-header .col:first-child img,
    .header-flags img { height: 16px !important; }
    .sc-site-header .header-icons a, .sc-site-header .header-icons button,
    .blog-header .col:last-child a, .blog-header .col:last-child button {
        width: 26px !important; height: 26px !important;
        min-width: 26px !important; min-height: 26px !important;
    }
    .icon-item h3, .icon-card h3, .icon-item .title, .icon-card .title,
    .figure-caption, figcaption { font-size: 11px !important; line-height: 1.3 !important; }
    .icon-item .description, .icon-card .description { font-size: 9.5px !important; }
    .carousel-caption h2, .carousel-caption h3 { font-size: 1.65rem; }
}


/* ═══════════════════════════════════════════════════════
   섹션 34. 태블릿 (min-width: 768px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    :root { --gutter: 20px; --gap: 24px; --pad: 20px; }

    .blog-header, .sc-site-header { padding: .8rem var(--gutter) !important; }
    .blog-header-logo, .sc-site-header .navbar-brand { font-size: 1.5rem; }
    .navbar { padding: .5rem var(--gutter); }

    .navbar-nav { padding: .45rem var(--gutter); gap: .35rem; }

    .icon-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s5); }
    .icon-item, .icon-card { min-height: 210px !important; padding: var(--s5) !important; }

    .sc-list-blog { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sc-list-gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

    .sc-item-cubic .figure-caption, .sc-item-cubic figcaption {
        min-height: 64px; padding: .7rem !important; font-size: .9rem !important;
    }
    .sc-page-home-cubic, .sc-page-content, .sc-cubic-search,
    .sc-permalink-menu-content { margin-bottom: var(--section-gap); }
    .sc-permalink-container { padding: var(--s8) var(--gutter); }

    .display-4 { font-size: clamp(2rem, 5vw, var(--font-size-xxl)); }
}


/* ═══════════════════════════════════════════════════════
   섹션 35. 와이드 (min-width: 1024px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    :root { --gutter: 32px; --gap: 32px; --pad: 28px; }

    .icon-grid { grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: clamp(16px,2vw,28px); }
    .sc-list-blog { grid-template-columns: repeat(auto-fill, minmax(360px,1fr)); }

    .sc-site-main, main[role="main"] {
        max-width: var(--content-max) !important;
        padding-left: clamp(24px,3vw,48px);
        padding-right: clamp(24px,3vw,48px);
    }
    .navbar { padding: .6rem var(--gutter); }
    .navbar-nav { justify-content: center; gap: .5rem; }
    .nav-link { font-size: 14px; padding: .55rem 1.2rem !important; }

    .blog-header { padding: .85rem var(--gutter) !important; }
}


/* ═══════════════════════════════════════════════════════
   섹션 36. 초와이드 (min-width: 1400px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    :root { --gutter: 40px; --gap: 52px; --pad: 32px; }
    .container { padding-left: 40px; padding-right: 40px; }
    .carousel-caption h2, .carousel-caption h3 { font-size: 4.2rem; }
}


/* ═══════════════════════════════════════════════════════
   섹션 37. prefers-reduced-motion
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .main-slide-img,
    .carousel-item.active img {
        animation: none !important; transform: scale(1.04) !important;
    }
    .jumbotron, .sc-site-title {
        animation: none !important; background-position: center center !important;
    }
}


/*
 * ═══════════════════════════════════════════════════════
 *  2026 Unified 통합 요약
 *
 *  [원본 1] 20260612-2_1_updated.css — SmartCubic 플랫폼 CSS
 *  [원본 2] ps-site_updated.css     — ps-site 보조 CSS
 *
 *  [통합 원칙]
 *   - 두 파일의 :root 변수 완전 통합 (중복 제거, 네이밍 일관화)
 *   - ps-site의 컨테이너 패딩 0 고정 → fluid clamp() 반응형으로 대체
 *   - ps-site의 #navbarNavDropdown fixed 375px → 100% fluid 글래스 패널
 *   - 충돌하는 .navbar / .bg-light / .dropdown-menu 규칙 → 최종 우선순위 통합
 *   - sc-mypage-menu: 두 파일의 가로(pill/inline-block) 방식 모두 제거
 *     → 단일 세로 탑다운 직사각형 목록으로 통일
 *   - 헤더 로고 중앙 정렬: 3열 grid (국기 | 로고 | 아이콘)
 *   - Ken Burns: active 슬라이드에서만 infinite alternate (heroDrift)
 *   - 서브 배너: transform 없이 background-position 이동 (bannerDrift)
 *   - 중복 keyframe 제거 (slideKenBurns, allthatpowerHeroDrift,
 *     scHeroBackgroundMove, heroBackgroundDrift 등 → heroDrift 하나로)
 *   - transition: all 전면 금지 → --tr-fast / --tr / --tr-lift 통합
 * ═══════════════════════════════════════════════════════
 */